<template>
  <table class="table-bordered table-striped table-balls">
    <thead>
    <tr>
      <th>期号</th>
      <th v-for="i in 11">{{i | pad}}</th>
    </tr>
    </thead>
    <tbody>
    <tr v-for="item in results">
      <td>{{item.no | pad}}期</td>
      <td v-for="(i, index) in missing(item)">
        <b v-if="ball(i, index, item.results)" class="ball on">{{index + 1 | pad}}</b>
        <b v-else>{{i}}</b>
      </td>
    </tr>
    </tbody>
  </table>
</template>

<script>
import { pad } from '../../utils/filters'

export default {
  props: ['data', 'rule'],
  name: 'trend',
  methods: {
    missing (item) {
      if (!item.missing) {
        return []
      }
      var arr = item.missing.split(',')
      return arr[0].split('|')
    },
    ball (n, index, results) {
      var arr = results.split('|')
      var ball = pad(index + 1)
      switch (this.rule) {
        case 'q1' :   // 前一玩法，判断该位数与开奖结果第一位是不是相同
          return ball == arr[0]
        case 'q2c' :  // 前二组选，显示前2位奖号码
        case 'q2d' :  // 前二直选
          return ball == arr[0] || ball == arr[1]
        case 'q3c' :  // 前三组选，显示前3位开奖号码
        case 'q3d' :  // 前三直选
          return ball == arr[0] || ball == arr[1] || ball == arr[2]
        default :     //  任2至任8，乐2至乐5 直接显示开奖结果
          return arr.includes(ball)
      }
    }
  },
  computed: {
    results () {
      return this.data.slice().reverse()
    }
  }
}
</script>

<style lang="scss">
  @import "../../assets/css/theme";
</style>
